<template>
  <view class="page">
    <banner :position="6" height="400rpx"></banner>
    <view class="content">
      <searchContent ref="searchContent" @search="resetPaginationRefresh"></searchContent>
      <!--			活动列表-->
      <view class="activity-list" v-if="activityList.length > 0">
        <view
          class="item"
          v-for="item in activityList"
          :key="item.studyActivityId"
          @click="
            () => {
              $uni.navigateTo({ url: handleUrlParams('/studyRoom/pages/activity/detail', { studyActivityId: item.studyActivityId }) })
            }
          "
        >
          <view class="content">
            <image class="icon" :src="getShowImage(item.activityLogo)"></image>

            <view class="right">
              <!--							活动名称-->
              <view class="activity-name">{{ item.activityName }}</view>
              <!--							活动持续时间-->
              <view class="remain-time">
                <text>{{ moment(item.startTime).format("YYYY-MM-DD") }}</text>
                <text>至</text>
                <text>{{ moment(item.endTime).format("YYYY-MM-DD") }}</text>
              </view>
              <!--							活动介绍-->
              <view class="activity-introduction">{{ item.activityIntro }}</view>
            </view>
          </view>

          <view class="footer">
            <!--						活动分类-->
            <view class="activity-type" v-if="item.activityTypeName">{{ item.activityTypeName }}</view>
            <!--						参与人数-->
            <view class="join-user-count">
              <text class="number">{{ item.activityNum + item.peopleNum }}</text>
              <text>人参与中</text>
            </view>
            <!--						查看按钮-->
            <view class="view-btn">
              <text>立即查看 ></text>
            </view>
          </view>
        </view>
        <uni-load-more :status="loadMoreStatusText"></uni-load-more>
      </view>
      <empty v-else height="800rpx"></empty>
    </view>
  </view>
</template>

<script>
import banner from "@/components/banner.vue"
import request from "@/utils/request"
import searchContent from "./components/searchContent.vue"
import uniLoadMore from "@/uni_modules/uni-load-more/components/uni-load-more/uni-load-more.vue"
import empty from "@/components/empty.vue"
import { getShowImage, handleUrlParams } from "@/utils"
import moment from "@/lib/moment.min"

export default {
  components: { banner, searchContent, uniLoadMore, empty },
  data() {
    return {
      pagination: {
        current: 1,
        size: 10,
      },
      loadMoreStatusText: "more",
      activityList: [],
      moment,
    }
  },
  onLoad() {
    this.$nextTick(() => {
      this.resetPaginationRefresh()
    })
  },
  methods: {
    handleUrlParams,
    getShowImage,
    async getActivityList() {
      const data = await request({
        url: "studyActivity/getActivityPage",
        data: {
          ...this.$refs.searchContent.searchForm,
          ...this.pagination,
        },
        errorHandle: true,
      })
      this.activityList.push(...data.records)
      if (this.activityList.length >= data.total) {
        this.loadMoreStatusText = "noMore"
      } else {
        this.loadMoreStatusText = "more"
      }
    },
    resetPaginationRefresh() {
      this.pagination.current = 1
      this.loadMoreStatusText = "more"
      this.activityList = []
      uni.showLoading({
        title: "加载中",
      })
      this.getActivityList().finally(() => {
        uni.hideLoading()
      })
    },
    onReachBottom() {
      if (this.loadMoreStatusText === "loading" || this.loadMoreStatusText === "noMore") {
        return
      }
      this.pagination.current++
      this.loadMoreStatusText = "loading"
      this.getActivityList()
    },
  },
}
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  background: var(--gray-background-color);
  padding-bottom: env(safe-area-inset-bottom);

  > .content {
    padding: 20rpx 40rpx;

    > .activity-list {
      > .item {
        margin-top: 30rpx;
        border-radius: 10rpx;
        background: var(--background-color);
        padding: 20rpx;

        > .content {
          display: flex;

          > .icon {
            width: 280rpx;
            height: 180rpx;
          }

          > .right {
            margin-left: 20rpx;
            width: 0;
            flex: 1;

            > .activity-name {
              font-size: 30rpx;
              font-weight: bold;
            }

            > .remain-time {
              margin-top: 10rpx;
              color: var(--text-color-light);
              font-size: 30rpx;
            }

            > .activity-introduction {
              font-size: 30rpx;
              margin-top: 10rpx;
              width: 100%;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }

        > .footer {
          margin-top: 20rpx;
          display: flex;
          align-items: center;
          font-size: 30rpx;

          > .activity-type {
            color: #d98a00;
            padding: 5rpx 10rpx;
            border-radius: 10rpx;
            border: 2rpx solid #d98a00;
            margin-right: 30rpx;
          }

          > .join-user-count {
            color: var(--text-color-light);
            width: 0;
            flex: 1;

            > .number {
              color: #a75b07;
            }
          }

          > .view-btn {
            color: #ff6219;
          }
        }
      }
    }
  }
}
</style>
